<template>
    <div class="special-zero" id="special-zero">
        <div class="desc">
            每个用户同个商品仅限补贴1件商品，同个订单下多件商品不补贴！
        </div>
        <div class="goods-content">
            <van-pull-refresh v-model="isRefresh" @refresh="onRefresh">
                <van-list
                        v-model="loading"
                        :finished="finished"
                        :error.sync="error"
                        @load="loadMore"
                        finished-text="没有更多了"
                        loading-text="拼命加载中"
                >
                    <div class="goods-list" v-if="goodsList.length > 0">
                        <div class="goods-wrap" v-for="(item, index) in goodsList" :key="index">
                            <zero-item ref="zeroItem" :item="item" @refresh="refresh"></zero-item>
                        </div>
                    </div>

                    <!--骨架屏-->
                    <van-skeleton
                            v-for="i in 3"
                            :key="'i' + i"
                            :row-width="['100%', '60%', '30%', '100%']"
                            avatar
                            avatar-size="120px"
                            avatar-shape="square"
                            :row="4"
                            :loading="loading"
                    ></van-skeleton>

                    <div slot="error">
                        <empty emptyText="暂无商品" offsetTop="150"></empty>
                    </div>
                </van-list>
            </van-pull-refresh>
        </div>

        <!--回到首页-->
        <div class="backHome" @click="$router.push('/index')">
            <svg-icon iconName="shouye"></svg-icon>
        </div>
    </div>
</template>

<script>
	import { PullRefresh, List, Skeleton } from 'vant';
	import { ZeroItem } from './components';
	import { Empty } from '@/components';
	export default {
		name: 'special-zero',
		components: {
			ZeroItem,
			Empty,
			'van-pull-refresh': PullRefresh,
			'van-list': List,
			'van-skeleton': Skeleton
		},
		data() {
			return {
				isRefresh: false, // 控制是否刷新
				loading: false, // 控制loading显示
				finished: false, // 控制是否加载更多商品
				error: false,
				goodsList: [],
				params: {
					page: 1,
					size: 20,
					freeStatus: 0,
					isFree: 1
				}
			};
		},
		mounted() {
			document.getElementById('special-zero').style.minHeight = document.documentElement.clientHeight + 'px';
		},
		created() {
			// 淘宝授权状态反馈
			let authorize = this.$route.query.authorize;
			if (authorize === 'success') {
				window.addEventListener(
					'popstate',
					() => {
						this.$router.push('/index');
					},
					false
				);
			}
		},
		methods: {
			// 刷新
			refresh() {
				this.error = false;
				this.goodsList = [];
				this.loading = true;
				this.finished = false;
				this.params.page = 1;
				this.loadMore();
			},
			// 下拉刷新
			onRefresh() {
				this.error = false;
				this.goodsList = [];
				this.loading = true;
				this.finished = false;
				this.params.page = 1;
				this.loadMore('refresh');
			},
			// 追加数据
			loadMore(operate) {
				this.$service.shopping.goods.zeroGoodsList(this.params).then(res => {
					this.goodsList = this.goodsList.concat(res.list);
					// 加载状态结束
					this.loading = false;
					this.params.page += 1;

					// 刷新列表
					if (operate === 'refresh') {
						this.$toast('刷新成功');
						this.isRefresh = false;
					}

					// 数据全部加载完成
					if (this.goodsList.length === 0) {
						this.params.page = 1;
						this.error = true;
					} else if (this.goodsList.length >= res.pagination.total) {
						this.finished = true;
					}
				});
			}
		}
	};
</script>

<style lang="scss" scoped>
    .special-zero {
        background: #fd2e3d url('../../../assets/images/index/special/zero-background.png') no-repeat top;
        background-size: 100%;
        width: 100%;
        min-height: 100%;
        padding-top: 274px;
        padding-bottom: 25px;
        position: relative;
        .desc {
            width: 694px;
            height: 32px;
            background: rgba(255, 255, 255, 0.16);
            color: $color-white;
            border-radius: 16px;
            position: absolute;
            top: 10px;
            font-size: 20px;
            text-align: center;
            line-height: 32px;
            left: 50%;
            margin-left: -347px;
        }
        .goods-content {
            width: 700px;
            padding: 26px 0 10px;
            margin: 0 auto;
            border-radius: 32px;
            background: $color-white;
            .van-list {
                min-height: 850px;
                padding: 18px 24px;
                .goods-list {
                    margin-bottom: 30px;
                    .goods-wrap {
                        padding-top: 30px;
                        margin-top: 30px;
                        border-top: 2px solid #e2e2e2;
                        &:first-child {
                            padding-top: 0;
                            margin-top: 0;
                            border-top: none;
                        }
                        &:last-child {
                            margin-bottom: 30px;
                        }
                    }
                }
                .van-skeleton {
                    margin-bottom: 30px;
                    padding: 0 0 30px 0;
                    border-bottom: 2px dotted #f2f3f5;
                    .van-skeleton__avatar {
                        width: 37% !important;
                        height: 0 !important;
                        padding-bottom: 37%;
                        border-radius: 20px;
                    }
                    .van-skeleton__content {
                        padding-top: 0;
                        @include flexBox(space-between, null, column);
                    }
                }
            }
        }
        /deep/.van-list__finished-text {
            border-top: 2px solid #e2e2e2;
        }
    }
</style>
